<template>
  <!-- 主题切换 start -->
  <div class="body">
    <label class="switch">
      <!-- 太阳 -->
      <span class="sun">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <g fill="#ffd43b">
            <circle r="5" cy="12" cx="12"></circle>
            <path
              d="m21 13h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm-17 0h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm13.66-5.66a1 1 0 0 1 -.66-.29 1 1 0 0 1 0-1.41l.71-.71a1 1 0 1 1 1.41 1.41l-.71.71a1 1 0 0 1 -.75.29zm-12.02 12.02a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.41l.71-.66a1 1 0 0 1 1.41 1.41l-.71.71a1 1 0 0 1 -.7.24zm6.36-14.36a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm0 17a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm-5.66-14.66a1 1 0 0 1 -.7-.29l-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.29zm12.02 12.02a1 1 0 0 1 -.7-.29l-.66-.71a1 1 0 0 1 1.36-1.36l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.24z"
            ></path>
          </g>
        </svg>
      </span>
      <!-- 月亮 -->
      <span class="moon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
          <path
            d="m223.5 32c-123.5 0-223.5 100.3-223.5 224s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4 5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6-96.9 0-175.5-78.8-175.5-176 0-65.8 36-123.1 89.3-153.3 6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
          ></path>
        </svg>
      </span>
      <input type="checkbox" class="input" @click="switchThemes" />
      <span class="slider"></span>
    </label>
  </div>
  <!-- 主题切换 end -->
</template>
<script>
// import Vue from "vue";
export default {
  data() {
    return {
      url: "",
      hostIp: null,
      beta: false,
      deepPort: "",
      contentAfterSlash: "",
      app_user: process.env.VUE_APP_USER,
      host: window.location.host,
    };
  },
  methods: {
    switchThemes() {
      // 切换beta的状态
      this.beta = !this.beta;
      //   3.44
      if (this.hostIp.includes("3.44")) {
        if (["alpha", "beta"].includes(process.env.VUE_APP_VERSIONS)) {
          this.deepPort = "8084";
          this.url = `http://${this.hostIp}:${this.deepPort}/#/${this.contentAfterSlash}`;
          console.log("url", this.url);
        }
        if (["delta", "gamma"].includes(process.env.VUE_APP_VERSIONS)) {
          this.deepPort = "8081";
          this.url = `http://${this.hostIp}:${this.deepPort}/#/${this.contentAfterSlash}`;
          console.log("url", this.url);
        }
        // 8.204
      } else if (this.hostIp.includes("8.204")) {
        if (["alpha"].includes(process.env.VUE_APP_VERSIONS)) {
          this.deepPort = "8088";
          this.url = `http://${this.hostIp}:${this.deepPort}/#/${this.contentAfterSlash}`;
          console.log("url", this.url);
        }
        if (["delta"].includes(process.env.VUE_APP_VERSIONS)) {
          this.deepPort = "8081";
          this.url = `http://${this.hostIp}:${this.deepPort}/#/${this.contentAfterSlash}`;
          console.log("url", this.url);
        }
        if (["beta"].includes(process.env.VUE_APP_VERSIONS)) {
          this.deepPort = "8087";
          this.url = `http://${this.hostIp}:${this.deepPort}/#/${this.contentAfterSlash}`;
          console.log("url", this.url);
        }
        if (["gamma"].includes(process.env.VUE_APP_VERSIONS)) {
          this.deepPort = "8082";
          this.url = `http://${this.hostIp}:${this.deepPort}/#/${this.contentAfterSlash}`;
          console.log("url", this.url);
        }
        // 47.95.66.77
      } else if (this.hostIp.includes("66.77")) {
        if (["alpha"].includes(process.env.VUE_APP_VERSIONS)) {
          this.deepPort = "8088";
          this.url = `http://${this.hostIp}:${this.deepPort}/#/${this.contentAfterSlash}`;
          console.log("url", this.url);
        }
        if (["delta"].includes(process.env.VUE_APP_VERSIONS)) {
          this.deepPort = "8081";
          this.url = `http://${this.hostIp}:${this.deepPort}/#/${this.contentAfterSlash}`;
          console.log("url", this.url);
        }
        if (["beta"].includes(process.env.VUE_APP_VERSIONS)) {
          this.deepPort = "8087";
          this.url = `http://${this.hostIp}:${this.deepPort}/#/${this.contentAfterSlash}`;
          console.log("url", this.url);
        }
        if (["gamma"].includes(process.env.VUE_APP_VERSIONS)) {
          this.deepPort = "8082";
          this.url = `http://${this.hostIp}:${this.deepPort}/#/${this.contentAfterSlash}`;
          console.log("url", this.url);
        }
      }
      window.open(this.url, "_self");
    },
  },
  mounted() {
    let path = this.$route.fullPath;
    let index = path.indexOf("/");
    this.contentAfterSlash = path.substring(index + 1); // 从 "/" 后的字符开始截取
    console.log(this.contentAfterSlash); // 输出: "dag"
    console.log(";process.env.VUE_APP_VERSIONS", process.env.VUE_APP_VERSIONS);

    this.hostIp = this.host.split(":")[0];
    console.log("this.hostIp", this.hostIp);
    const checkbox = this.$el.querySelector(".input");
    if (this.hostIp.includes("3.44")) {
      if (["alpha", "beta"].includes(process.env.VUE_APP_VERSIONS)) {
        checkbox.checked = false;
      }
      if (["delta", "gamma"].includes(process.env.VUE_APP_VERSIONS)) {
        checkbox.checked = true;
      }
    } else if (this.hostIp.includes("8.204")) {
      if (["alpha", "beta"].includes(process.env.VUE_APP_VERSIONS)) {
        checkbox.checked = false;
      }
      if (["delta", "gamma"].includes(process.env.VUE_APP_VERSIONS)) {
        checkbox.checked = true;
      }
    } else if (this.hostIp.includes("66.77")) {
      if (["alpha", "beta"].includes(process.env.VUE_APP_VERSIONS)) {
        checkbox.checked = false;
      }
      if (["delta", "gamma"].includes(process.env.VUE_APP_VERSIONS)) {
        checkbox.checked = true;
      }
    }
  },
};
</script>
<style lang="less" scoped>
.body {
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 54px;
    height: 24px;
    input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #73c0fc;
      transition: 0.4s;
      border-radius: 30px;
      &::before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        border-radius: 20px;
        left: 3px;
        bottom: 2px;
        z-index: 2;
        background-color: #e8e8e8;
        transition: 0.4s;
      }
    }
    .sun {
      svg {
        position: absolute;
        top: 2px;
        left: 32px;
        z-index: 1;
        width: 20px;
        height: 20px;
      }
    }
    .moon {
      svg {
        fill: #73c0fc;
        position: absolute;
        top: 2px;
        left: 5px;
        z-index: 1;
        width: 20px;
        height: 20px;
      }
    }
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.sun svg {
  animation: rotate 15s linear infinite;
}

@keyframes tilt {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-10deg);
  }

  75% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.moon svg {
  animation: tilt 5s linear infinite;
}

.input:checked + .slider {
  background-color: #183153;
}

.input:focus + .slider {
  box-shadow: 0 0 1px #183153;
}

.input:checked + .slider:before {
  transform: translateX(30px);
}
</style>
